<template>
    <view class="app-icon" :class="[{ circle }]" @click="emit('click')">
        <AppImage :src="props.src" :width="props.size" :height="props.size"></AppImage>
    </view>
</template>

<script setup lang='ts' name="AppIcpn">
import AppImage from "@/components/AppImage/index.vue";

export interface AppIcpnProps {
    /**大小 */
    size?: string
    /**图片地址(本地或网络) */
    src?: string
    /**圆角 */
    circle?: boolean
}
export interface AppIcpnEmits {
    (e: 'click'): void
}

const emit = defineEmits<AppIcpnEmits>()

const props = withDefaults(defineProps<AppIcpnProps>(), {
    size: '50',
    src: "https://dummyimage.com/600x400/000/fff",
    circle: false
})

</script>

<style scoped lang="scss">
.app-icon {
    position: relative;
    vertical-align: middle;
    border-radius: 8rpx;
    overflow: hidden;

    &.circle {
        overflow: hidden;
        border-radius: 50%;
    }
}
</style>